<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-12-列表渲染</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>

<div id="root">
    <h3>人员列表(watch实现)</h3>
    <input type="text" placeholder="请输入名字" v-model="keyWord1">
    <ul>
        <!-- 可以使用 persons 列表中的 id 作为遍历时的 key -->
        <li v-for="(person, index) in filterPersons1" :key="person.id">
            {{ index + 1 }}. {{ person.name }}: {{ person.age }} | {{person.sex}}
        </li>
    </ul>
    <hr>
    <h3>人员列表(computed实现)</h3>
    <input type="text" placeholder="请输入名字" v-model="keyWord2">
    <ul>
        <!-- 可以使用 persons 列表中的 id 作为遍历时的 key -->
        <li v-for="(person, index) in filterPersons2" :key="person.id">
            {{ index + 1 }}. {{ person.name }}: {{ person.age }} | {{person.sex}}
        </li>
    </ul>

</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            keyWord1: '',
            keyWord2: '',

            filterPersons1: [],

            persons: [{
                id: '10001',
                name: '马冬梅',
                age: 19,
                sex: '女',
            }, {
                id: '10002',
                name: '周冬雨',
                age: 23,
                sex: '女',
            }, {
                id: '10003',
                name: '周杰伦',
                age: 21,
                sex: '男',
            }, {
                id: '10004',
                name: '温兆伦',
                age: 22,
                sex: '男',
            },],
        },

        watch: {
            keyWord1: {
                immediate: true,

                handler(value) {
                    this.filterPersons1 = this.persons.filter((person) => {
                        return person.name.indexOf(value) !== -1
                    })
                },
            },
        },

        computed: {
            filterPersons2() {
                return this.persons.filter((person) => {
                    return person.name.indexOf(this.keyWord2) !== -1
                })
            },
        },
    })
</script>
</body>
</html>